<template>
   <div class="wrap" :style="{minHeight:$store.state.minHeight+'rem'}">
      <myHead title="确认订单"></myHead>
      <div class="address" @click="jump('addAddress')" v-show="!address?true:false">
         <span>添加地址</span>
         <img src="../../../static/img/add.png" alt="">
      </div>
      <div class="selectedAddress" v-show="address?true:false">
         <div class="select_top" @click="jump('myAddress')">
            <div class="sel_top">
               <div><img src="../../../static/img/moren.png" alt="" v-if="address.type == 1"><p>{{address.dispatching+address.particular}}</p></div>
               <p>{{address.name}}&emsp;{{address.phone}}</p>
            </div>
            <img src="../../../static/img/youjiantou3.png" alt="">
         </div>
         <div class="select_bot" v-if="sendType.type==1" @click="show1 = true"><span>到店自取</span><span></span></div>
         <div class="select_bot" v-else @click="show1 = true"><span>立即送出</span><span>大约{{psTime[0]}}:{{psTime[1]}}送达</span></div>
      </div>
      <div class="info">
         <div class="infoTop" v-for="(x,y) in shopList">
            <img :src="$store.state.imgurlApi+x.image" alt="">
            <div class="infoMsg">
               <p>{{x.title}}</p>
               <div class="msg_2"><p>规格:&nbsp;&nbsp;<span v-for="z in x.gg">{{z}}&ensp;</span></p></div>
               <div class="num">
                  <p>￥{{x.price}}</p>
                  <p>x<span>{{x.number}}</span></p>
               </div>
            </div>
         </div>
         <div class="infoBot">
            <span>配送费</span>
            <span>￥{{psMoney[0]}}</span>
         </div>
         <div class="infoBot">
            <span>包装费</span>
            <span>￥{{psMoney[1]}}</span>
         </div>
      </div>
      <div class="bottom">
         <div class="item">
            <div><img src="../../../static/img/fan.png" alt=""><span>满返积分商家优惠</span></div>
            <span>返{{money[0]}}积分</span>
         </div>
         <div class="item-1" @click="yhj">
            <div class="item-1-img"><span>优惠券</span><p>{{useNum}}张可使用</p></div>
            <div><span v-if="useNum>=1">{{YHJ?'满'+YHJ.condition+'减'+YHJ.sum+'元':'暂未使用'}}</span><span v-else>无可用优惠券</span> <img src="../../../static/img/yjt1.png" alt=""></div>
         </div>
         <div class="bot-shopMsg">
            <p>买家留言</p>
            <textarea name=""  placeholder="留言保持20字以内" v-model="txtVal"></textarea>
         </div>
         <div class="money">
            <p>已优惠&nbsp;&nbsp;<span>￥{{money[1]}}</span></p>
            <p>小计&nbsp;&nbsp;<span>￥{{money[0]}}</span></p>
         </div>
      </div>
      <footer>
         <div class="foot_left">
            <span>已优惠￥{{money[1]}}</span>
            <p>合计 <span>￥{{money[0]}}</span></p>
         </div>
         <div class="submit" @click="popup">提交订单</div>
      </footer>

      <van-popup v-model="isHide" class="fkPopup" get-container="body" :close-on-click-overlay="false" :closeable="true" @close="closeOrder">
         <div class="popup" >
            <div class="popup_box">
               <img src="../../../static/img/dingdan1.png" alt="">
               <span class="pop1">订单支付成功</span>
               <span class="pop2">店家正在为您备货</span>
               <div class="pop3" @click="jump('orderDetails')">查看订单</div>
            </div>
         </div>
         <p style="width: 100%;height: .01rem"></p>
      </van-popup>

      <!--  优惠券选择  -->
      <van-popup v-model="yhjShow" round position="bottom" :style="{ height: '55%' }">
         <div class="yhj_wrap">
            <div class="yhj_tit"><p>优惠券</p><img src="../../../static/img/closeTu.png" alt="" @click="yhjShow=false"></div>
            <div class="yhj_item_wrap">
               <div class="yhj_item" v-for="x in coupon">
                  <div class="yhj_item_left">
                     <p><span>￥</span>{{x.sum}}</p>
                     <p>满{{x.condition}}元可用</p>
                  </div>
                  <div class="yhj_item_right">
                     <div class="yhj_item_rt_left">
                        <p>{{x.sum}}元代金券</p>
                        <p>{{x.type==1?'通用红包':'店铺红包'}}</p>
                        <p>{{x.deadline | formatDate}}</p>
                     </div>
                     <p :class="x.isUse?'yhj_item_btn':'yhj_item_btn usered'" @click="useYHJ(x)">
                        {{x.isUse?'立即使用':'不可使用'}}</p>
                  </div>
               </div>
            </div>
         </div>
      </van-popup>


      <!--付款弹窗-->
      <van-dialog v-model="isPay" title="订单支付"  show-cancel-button width="3.2rem" :beforeClose="beforeClose" cancel-button-text="微信支付" confirm-button-text="余额支付">
         <div class="payTxt">
            本次需要支付<span style="color: #FF7611">￥{{money[0]}}</span>
         </div>
      </van-dialog>

      <van-action-sheet
              v-model="show1"
              :actions="actions"
              description="配送方式"
              @select="onSelect"
      />
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead";
    import {formatDate} from '../../methods/time';
    export default {
        name: "manyOrder",
        components: {
            myHead
        },
        filters: {
            formatDate(time) {
                time = time * 1000;
                let date = new Date(time);
                return formatDate(date, 'yyyy/MM/dd')
            }
        },
        data(){
            return {
                isShow:true,
                isHide:false,
                txtVal:'',
                address:false, // 显示地址
                shopList:[], // 商品列表
                coupon:[], // 优惠券列表
                useNum:0, // 可使用的优惠券
                yhjShow: false,
                YHJ:false, // 当前使用的优惠券
                isPay:false, // 付款弹窗
                psMoney:[], // 配送费与包装费
                order_id:"", // 订单ID
                sendType:{type:0}, // 配送方式
                psTime:0, // 配送时间
                show1: false,
                actions: [
                    {name: '外卖配送',type:0},
                    {name: '到店自取',type:1},
                ]
            }
        },
        beforeCreate(){
            this.$nextTick(res=>{
                var date = new Date();
                var min = date.getMinutes();
                date.setMinutes(min+40);
                var h = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours();
                var f = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes();
                this.psTime = [h,f];
            })
        },
        created(){
            this.psMoney = this.$route.query.data;
            // 获取用户购物车
            var car = JSON.parse(this.$myStorage.getItem(1,'userCar'));
            console.log(this.$myStorage.getItem(1,'userCar'))
            for (var i in car.carArr) {
                if (car.carArr[i][0].store_id == this.$route.query.id) {
                    this.shopList = car.carArr[i];
                    break;
                }
            }
            // 获取用户默认地址
            // 请求地址列表
            this.$myAxios('index/address/index','post',{
                user_id:this.$myStorage.query()
            }).then(res=>{
                if (res.data.state) {
                    if (this.$myStorage.query('mr')){
                        this.address = res.data.address[this.$myStorage.query('mr')]
                    }else {
                        for (var i of res.data.address) {
                            if (i.type == 1){
                                this.address = i;
                                break;
                            }
                        }
                    }
                }else {
                    this.$myNotice('记得填写地址！',3000);
                }
                console.log(this.address)
            });
            // 获取服务器时间戳
            this.$myAxios('api/index/getTime','get',{}).then(res=>{
                if (res.data.code == 1) {
                    var time = res.data.time;
                    // 请求优惠券列表
                    this.$myAxios('index/coupon/index','post',{
                        user_id:this.$myStorage.query()
                    }).then(ress=>{
                        if (ress.data.state == 1) {
                            var data = ress.data.address;
                            var arr = [];
                            var num = 0;
                            // 计算当前总价
                            for (var s in this.shopList) {
                                num+=(this.shopList[s].number*this.shopList[s].price);
                            }
                            num+=this.psMoney[0]*1;
                            num+=this.psMoney[1]*1;
                            for (var i in data) {
                                if (data[i].starttime < time && data[i].deadline > time) {
                                    if (data[i].mid == '0') {
                                        if (num < data[i].condition){
                                            data[i].isUse = false;
                                        }else {
                                            data[i].isUse = true;
                                            this.useNum+=1;
                                        }
                                        arr.push(data[i])
                                    }else {
                                        if (data[i].mid != this.shopList[0].store_id || num < data[i].condition){
                                            data[i].isUse = false;
                                        }else {
                                            data[i].isUse = true;
                                            this.useNum+=1;
                                        }
                                        arr.push(data[i])
                                    }
                                }
                            }
                            this.coupon = arr;
                            console.log( this.useNum)
                            console.log( this.coupon)
                        }else {

                        }
                    })
                }
            })

        },
        computed:{
            money(){
                var num = 0;
                var yh = 0;
                for (var i in this.shopList) {
                    num+=(this.shopList[i].number*this.shopList[i].price);
                }
                if (this.YHJ) {
                    if (num+this.psMoney[0]*1+this.psMoney[1]*1 >= this.YHJ.condition) {
                        yh = this.YHJ.sum;
                    }
                }
                return [num-yh+this.psMoney[0]*1+this.psMoney[1]*1,yh];
            }
        },
        methods:{
            onSelect(item) {
                // 默认情况下点击选项时不会自动收起
                // 可以通过 close-on-click-action 属性开启自动收起
                this.show1 = false;
                this.sendType.type = item.type;
            },
            beforeClose(action,done){
                if (action === 'confirm') {
                    // 余额支付
                    // 组装商品列表
                    var shopArr = [];
                    var id_list = [];
                    for (var i of this.shopList) {
                        shopArr.push({
                            id:i.id,
                            gg:[...i.gg],
                            number:i.number
                        });
                        id_list.push(i.id)
                    }
                    this.$myAxios('index/Order/index','post',{
                        id:'',
                        mid:this.shopList[0].store_id,
                        product_id:JSON.stringify(shopArr),
                        total_price:this.money[0],
                        pack:this.psMoney[1],
                        coupon_id:this.YHJ?this.YHJ.id:'',
                        payment:'3',
                        type:this.sendType.type,
                        shipping_fee:this.psMoney[0],
                        orderid:'',
                        order_time:'',
                        finish_time:'',
                        status:0,
                        sort:'',
                        site_id:this.address.id,
                        courier_id:'',
                        user_id:this.$myStorage.query(),
                        content:this.txtVal,
                        pid:id_list.join(',')
                    }).then(res=>{
                        console.log(res.data);
                        if (res.data.state == 1) {
                            this.order_id = res.data.order_find.id;
                            this.$myAxios('index/Order/pay','post',{
                                user_id:this.$myStorage.query(),
                                id:this.order_id,
                                total_price:this.money[0],
                                coupon_id:this.YHJ?this.YHJ.id:'',
                            }).then(res=>{
                                // 清理用户购物车
                                var car = JSON.parse(this.$myStorage.getItem(1,'userCar'));
                                for (var i in car.carArr) {
                                    if (car.carArr[i][0].store_id == this.$route.query.id) {
                                        car.carArr.splice(i,1);
                                        break;
                                    }
                                }
                                this.$myStorage.setItem('localStorage','userCar',JSON.stringify(car));
                                if (res.data.state == 1) {
                                    this.$store.commit('obtainUserInfo',this.$myStorage.query());
                                    setTimeout(res=>{
                                        done();
                                        this.isHide = true;
                                    },500)
                                }else {
                                    setTimeout(res=>{
                                        this.$myNotice('余额不足',2000);
                                        done();
                                    },500);
                                }
                            })
                        } else {
                            this.$myNotice('请检查网络！',1500)
                        }
                    })
                } else {
                    // 微信支付
                    this.$myNotice('微信支付暂未开通！',1500);
                    setTimeout(res=>{
                        done();
                    },500)
                }
            },
            // 优惠券
            yhj(){
                if (this.useNum<1){
                    this.$myNotice('暂无可使用优惠券~',1500);return}
                this.yhjShow = true;
                // this.$myNotice('暂未开放~',1500);
            },
            // 使用优惠券
            useYHJ(data){
                if (!data.isUse) {
                    this.$myNotice('不满足使用条件~',1500);
                    this.yhjShow = false;
                    return
                }
                this.YHJ = data;
                this.yhjShow = false;
            },
            closeOrder(){
                this.$router.back();
            },
            jump(page){
                this.$router.push({
                    name:page
                })
            },
            submission(){
                this.isShow = !this.isShow;
            },
            popup(){
                if (!this.address) {
                    this.$myNotice('请填写地址~',1500);
                    return
                }
                this.isPay = true;
                // this.isHide = true;
            },
            closePopup(){
                this.isHide = false;
            }
        },
        watch:{
            txtVal(){
                this.txtVal = this.txtVal.length>20?this.txtVal = this.txtVal.substring(0,20):this.txtVal;
            }
        }
    }
</script>

<style scoped>
   .wrap {
      width: 100%;
      box-sizing: border-box;
      padding-top: .5rem;
      background-color: #F5F5F5;
      padding-bottom: .3rem;
   }

   .address {
      width: 3.51rem;
      height: .46rem;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 .02rem .05rem 0 rgba(151, 151, 151, 0.06);
      border-radius: .07rem;
      margin: .1rem auto;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: center;
   }

   .address > span {
      color: #FF7611;
      font-size: .16rem;
      font-family: PingFang SC;
      font-weight: 500;
   }

   .address > img {
      width: .11rem;
      height: .11rem;
      margin-left: .05rem;
   }
   .info {
      width: 3.51rem;
      box-sizing: border-box;
      min-height: 1.4rem;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 .06rem .11rem 0 rgba(225, 225, 225, 0.28);
      border-radius: .07rem .07rem .07rem .07rem;
      margin: .1rem auto;
      padding: .15rem .1rem 0 .1rem;
   }
   .infoTop {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-flow: row;
      justify-content: flex-start;
      align-items: center;
      border-bottom:.01rem solid #F4F4F4;
      padding-bottom: .1rem;
   }
   .infoTop > img {
      width: .73rem;
      height: .6rem;
   }
   .infoMsg {
      width: calc(100% - .83rem);
      margin-left: .1rem;
      height: .6rem;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
   }
   .infoMsg > p:nth-child(1) {
      width: 100%;
      font-size: .15rem;
      line-height: .15rem;
      font-family: Adobe Heiti Std;
      font-weight: 500;
      color: #282828;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
   }
   .msg_2 {
      color: #717171;
      font-size:.14rem;
      line-height: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .msg_2>p {
      margin-right: .1rem;
   }
   .num {
      display: flex;
      flex-flow: row;
      align-items: center;
      height: .14rem;
   }
   .num>p:nth-child(1) {
      line-height: .14rem;
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:bold;
      color: #171717;
      margin-right: .3rem;
   }
   .num>p:nth-child(2) {
      font-size:.12rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #424242;
   }
   .infoBot {
      width: 100%;
      height: .5rem;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
      font-size: .15rem;
      color: #171717;
      font-family:PingFang SC;
      font-weight: bold;
      box-sizing: border-box;
      padding: 0 .05rem;
   }
   .bot-shopMsg {
      padding-top: .1rem;
      display: flex;
      flex-flow: row;
      align-items: flex-start;
      justify-content: space-between;
   }
   .bot-shopMsg>textarea {
      width: 2rem;
      height: .5rem;
      resize: none;
      border: none;
      font-size:.14rem;
      text-align: right;
   }
   .bot-shopMsg>textarea::placeholder {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #717171;
      text-align: right;
   }

   .bottom {
      width:3.51rem;
      background:rgba(255,255,255,1);
      box-shadow:0 .6rem .11rem 0 rgba(225,225,225,0.28);
      border-radius:.07rem .07rem .07rem .07rem;
      box-sizing: border-box;
      margin: .1rem auto;
      padding: 0 .1rem;
   }
   .item,.bot_box,.item-1{
      width: 100%;
      height: .5rem;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: .01rem solid #F4F4F4;
   }
   .item>div>img {
      width: .17rem;
      height: .17rem;
      margin-right: .1rem;
   }
   .item-1>div:nth-child(1)>img {
      width: .6rem;
      height: .16rem;
   }
   .item-1>div>img {
      margin-left: .1rem;
   }
   .item-1>div:nth-child(1) {
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .item>div {
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .item>div>span,.bot_box>span,.bot_box>div>span,.item-1>div {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #2D2C2C;
   }
   .bot_box>div>span,.item-1>div:nth-child(2) {
      color: #717171;
   }
   .item>span {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #FF7611;
   }
   .bot_box>div>img,.item-1>div:nth-child(2)>img {
      width: .05rem;
      height: .1rem;
      margin-left: .1rem;
   }



   .money {
      height: .5rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: flex-end;
   }
   .money>p:nth-child(1) {
      color: #2D2C2C;
      font-size: .12rem;
      margin-right: .1rem;
   }
   .money>p:nth-child(2) {
      color: #2D2C2C;
      font-size: .12rem;
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .money>p:nth-child(1)>span {
      color: #E60012;
      font-size: .12rem;
   }
   .money>p:nth-child(2)>span {
      color: #151515;
      font-size: .15rem;
      font-weight: bold;
   }

   footer {
      width:3.4rem;
      height:.5rem;
      background:linear-gradient(0deg,rgba(255,191,37,1) 0%,rgba(255,191,37,1) 100%);
      box-shadow:0 .06rem .11rem 0 rgba(255,118,17,0.4);
      margin: .45rem auto 0;
      border-radius: .3rem;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
   }

   .foot_left {
      width: 2.49rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 .15rem;
   }
   .foot_left>span {
      font-size:.1rem;
      color: #ffffff;
      font-family:PingFang SC;
      font-weight:500;
   }
   .foot_left>p {
      font-size: .14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #ffffff;
   }
   .foot_left>p>span {
      font-size: .18rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #ffffff;
   }
   .submit {
      width: .91rem;
      height: 100%;
      color: #ffffff;
      font-size:.16rem;
      font-family:PingFang SC;
      font-weight:bold;
      line-height: .5rem;
      background:linear-gradient(90deg,rgba(255,118,17,1) 1%,rgba(255,118,17,1) 100%);
      text-align: center;
   }

   .selectedAddress {
      width:3.52rem;
      height:1.46rem;
      background:rgba(255,255,255,1);
      border-radius:.07rem .07rem .07rem .07rem;
      margin: .1rem auto;
      box-sizing: border-box;
      padding: 0 .1rem;
   }
   .select_top {
      border-bottom: .01rem solid rgba(244,244,244,1);
      width: 100%;
      height: .9rem;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
   }
   .select_top>img:nth-child(2) {
      width: .08rem;
      height: .15rem;
      margin-right: .1rem;
   }
   .sel_top {
      width: 90%;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
   }
   .sel_top>div {
      display: flex;
      flex-flow: row;
      align-items: center;
      margin-bottom: .1rem;
   }
   .sel_top>div>img {
      width: .31rem;
      height: .2rem;
      margin-right: .1rem;
   }
   .sel_top>div>p {
      font-size:.16rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #1D1D1D;
   }
   .sel_top>p:nth-child(2) {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #3D3D3D;
   }
   .select_bot {
      width: 100%;
      height: .5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
   .select_bot {
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
   }
   .select_bot>span:nth-child(1) {
      color: #171717;
   }
   .select_bot>span:nth-child(2) {
      color: #FF7611;
   }

   .popup {
      width: 100%;
      height: 100%;
   }
   .popup>img:nth-child(2) {
      width: .3rem;
      height: .3rem;
      position: absolute;
      right: .3rem;
      top: 20%;
      z-index: 9999;
   }

   .popup_box {
      width:2.6rem;
      min-height:2.55rem;
      background:rgba(255,255,255,1);
      border-radius:.07rem;
      display: flex;
      flex-flow: column;
      justify-content: space-around;
      align-items: center;
      box-sizing: border-box;
      padding: .25rem 0 .35rem;
   }
   .popup_box>img {
      width: .93rem;
      height: .86rem;
   }
   .pop1 {
      font-size:.2rem;
      font-family:PingFang SC;
      font-weight:bold;
      color: #FF7611;
   }
   .pop2 {
      font-size:.12rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #999999;
      margin: .05rem 0;
   }
   .pop3 {
      width:1.73rem;
      height:.38rem;
      background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
      border-radius:.19rem;
      font-size:.18rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #ffffff;
      line-height: .38rem;
      text-align: center;
      letter-spacing: .02rem;
   }
   .bodyHide {
      overflow: hidden;
   }

   /* 弹窗适配 */
   >>> .fkPopup {
      padding: .02rem;
      background-color: transparent;
   }

   .item-1-img>p {
      background-image: url("../../../static/img/youhuijuanbeijingtu.png");
      font-size: .12rem;
      text-align: center;
      line-height: .2rem;
      color: #FFFFFF;
      padding: 0 .1rem;
      background-size: 100%;
   }

   /* 弹出框 */
   >>> .van-action-sheet__description {
      padding: .16rem;
      color: #333333;
      font-size: .18rem;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: .2rem;
   }

   >>> .van-action-sheet__cancel, .van-action-sheet__item {
      font-size: .18rem;
      line-height: .5rem;
      color: #333333;
      text-align: left;
      box-sizing: border-box;
      padding-left: .2rem;
   }

   >>> .van-popup {
      min-height: 2rem;
   }

   >>> .van-popup--bottom.van-popup--round {
      border-radius: .2rem .2rem 0 0;
   }

   >>> .van-action-sheet__item {
      height: .5rem;
   }
   >>> .fkPopup{
      transform: translate3d(0,0,0);
      top: 15% !important;
      left: calc(50% - 1.65rem) !important;
   }

   .yhj_wrap {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: .3rem .15rem;
      background-color: #F5F5F5;
   }

   .yhj_tit {
      display: flex;
      flex-flow: row;
      align-items: center;
      position: relative;
      margin-bottom: .15rem;
   }

   .yhj_tit > p {
      width: 100%;
      font-size: .18rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      text-align: center;
   }

   .yhj_tit > img {
      width: .26rem;
      height: .26rem;
      position: absolute;
      right: 0;
   }

   .yhj_item_wrap {
      width: 100%;
      height: 2.5rem;
      overflow-x: hidden;
      overflow-y: scroll;
   }

   .yhj_item {
      width: 100%;
      height: 1.05rem;
      background-image: url("../../../static/img/youhuiquanbj1111.png");
      background-size: 100% 100%;
      margin-bottom: .1rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }

   .yhj_item_left {
      width: 28%;
      height: 100%;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
   }

   .yhj_item_left > p:nth-child(1) {
      font-size: .36rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FF002A;
   }

   .yhj_item_left > p:nth-child(1) > span {
      font-size: .24rem;
   }

   .yhj_item_left > p:nth-child(2) {
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
   }

   .yhj_item_right {
      width: 71%;
      height: 100%;
      box-sizing: border-box;
      padding-left: .1rem;
      padding-right: .15rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }


   .yhj_item_rt_left {
      display: flex;
      flex-flow: column;
      align-items: center;
   }
   .yhj_item_rt_left > p:nth-child(1) {
      font-size: .18rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #323134;
   }

   .yhj_item_rt_left > p:nth-child(2) {
      font-size: .12rem;
      color: #FF6F02;
      border: .01rem solid #FF6F02;
      line-height: .15rem;
      padding: 0 .05rem;
      border-radius: .05rem;
      text-align: center;
      margin: .05rem 0;
      width: .5rem;
   }

   .yhj_item_rt_left > p:nth-child(3) {
      font-size: .12rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #CCCCCC;
   }

   .yhj_item_btn {
      width: .7rem;
      height: .27rem;
      background: linear-gradient(0deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
      box-shadow: 0 .06rem .11rem 0 rgba(255, 118, 17, 0.4);
      border-radius: .13rem;
      text-align: center;
      line-height: .27rem;
      font-size: .1rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
   }

   .usered {
      background: none !important;
      box-shadow: none !important;
      border: .01rem solid rgba(255, 112, 4, 1);
      color: #FF6F02;
   }

   .payTxt {
      height: .5rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: center;
      font-size:.14rem;
      font-family:PingFang SC;
      color: #1D1D1D;
   }

   /* 弹窗适配 */
   >>> .fkPopup {
      padding: .02rem;
      background-color: transparent;
   }
   /* 加减数量适配 */
   >>> .van-stepper__minus,>>> .van-stepper__plus {
      width: .22rem !important;
      height: .22rem !important;
      border-radius: .04rem 0 0 .04rem;
      padding: .04rem;
   }
   >>> .van-stepper__minus::before,>>> .van-stepper__plus::before {
      width: .13rem;
      height: .01rem;
   }
   >>> .van-stepper__minus::after {
      width: .13rem;
      height: .01rem;
   }
   >>> .van-stepper__plus::after {
      width: .01rem;
      height: .13rem;
   }
   >>> .van-stepper__input {
      border-width: .01rem 0;
      margin: 0 .02rem;
      font-size: .14rem;
      width: .32rem;
      height: .22rem !important;
   }
</style>
